<template>
  <view class="top_area">
    <!-- 搜索 -->
    <view class="search-bar">
      <view class="search">
        <image :src="searchIcon" mode="widthFix" />
        <view>关键字搜索</view>
      </view>
      <view style="display: flex; justify-content: flex-end">
        <image class="icon" mode="widthFix" :src="buyCarIcon"></image>
        <image class="icon red" mode="widthFix" :src="ringIcon"></image>
      </view>
    </view>
    <!-- banner -->
    <view class="banner">
      <u-swiper :list="swiperData" :height="200"></u-swiper>
    </view>

    <!-- 导航 -->
    <view class="list">
      <view class="item" v-for="item in navList" :key="item.url" @tap="jumpToPage(item.path)">
        <image :src="item.url" mode="widthFix"></image>
        {{ item.title }}
      </view>
    </view>

    <!-- vip权益 -->

    <view class="vip_container">
      <view class="left">
        <view class="info">
          <view class="title">会员权益</view>
          出口退税免费看
        </view>
        <image :src="vipBg" mode="widthFix"> </image>
      </view>

      <view class="right">
        <view style="position: relative; height: 120rpx; margin-bottom: 20rpx">
          <view class="info">
            <view class="title">尊享服务</view>
          </view>

          <image :src="vipSvr" mode="widthFix"> </image>
        </view>
        <view style="position: relative; height: 120rpx">
          <view class="info"><view class="title">畅学卡</view></view>
          <image :src="vipLession" mode="widthFix"> </image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navList: [
        {
          url: this.$staticImgurl + '/home/live.png',
          title: '直播好课'
        },
        {
          url: this.$staticImgurl + '/home/discount.png',
          title: '优惠活动'
        },
        {
          url: this.$staticImgurl + '/home/offline.png',
          title: '线下面授'
        },
        {
          url: this.$staticImgurl + '/home/practice.png',
          title: '财税实训'
        },
        {
          url: this.$staticImgurl + '/home/big_live.png',
          title: '大咖说'
        },
        {
          url: this.$staticImgurl + '/home/team.png',
          title: '师资团队'
        },
        {
          url: this.$staticImgurl + '/home/hot.png',
          path: '/pages/financeTaxHot/financeTaxHot',
          title: '财税热点'
        },
        {
          url: this.$staticImgurl + '/home/activi_center.png',
          title: '活动中心'
        },
        {
          url: this.$staticImgurl + '/home/member.png',
          title: '会员分销'
        },
        {
          url: this.$staticImgurl + '/home/center.png',
          title: '答疑中心'
        }
      ],
      swiperData: [
        {
          image: this.$staticImgurl + '/home/banner.png'
        },
        {
          image: this.$staticImgurl + '/home/banner.png'
        },
        {
          image: this.$staticImgurl + '/home/banner.png'
        }
      ],
      searchIcon: this.$staticImgurl + '/home/search.png',
      buyCarIcon: this.$staticImgurl + '/home/buycar.png',
      ringIcon: this.$staticImgurl + '/home/ring.png',
      vipBg: this.$staticImgurl + '/home/vip_bg.png',
      vipSvr: this.$staticImgurl + '/home/vip_service.png',
      vipLession: this.$staticImgurl + '/home/learn_card.png'
    };
  },
  methods: {
    jumpToPage(url) {
      console.log(111, url);
      uni.navigateTo({ url });
    }
  }
};
</script>

<style lang="scss" scoped>
.top_area {
  background: #fff;
  padding-top: 10rpx;
  padding: 10rpx 30rpx;

  .vip_container {
    height: 260rpx;
    display: flex;
    justify-content: space-between;
    image {
      position: absolute;
      width: 335rpx;
    }
    .info {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 5;
      padding: 30rpx;
      font-size: 26rpx;
      color: #734839;
      > .title {
        font-size: 32rpx;
        font-weight: bold;
        color: #13466e;
        margin-bottom: 20rpx;
      }
    }
    > .left {
      width: 335rpx;
      position: relative;
    }
    .right {
      position: relative;
      width: 335rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      > view {
      }
      image {
        position: absolute;
        width: 335rpx;
      }
    }
  }

  .list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 50rpx;

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 26rpx;
      margin-bottom: 40rpx;
      width: 20%;
      > image {
        width: 88rpx;
        margin-bottom: 20rpx;
      }
    }
  }

  .banner {
    width: 100%;
    height: 200rpx;
    margin-top: 20rpx;
    overflow: hidden;
  }

  .search-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    image {
      width: 39rpx;
      margin-left: 40rpx;
    }
    .icon {
      width: 44rpx;
      position: relative;
      &.red {
        &::after {
          position: absolute;
          border-radius: 50%;
          border: none;
          right: 0;
          top: 0;
          content: '';
          display: inline-block;
          width: 18rpx;
          height: 18rpx;
          background-color: #f53f34;
        }
      }
      &:last-child {
        width: 36rpx;
      }
    }
  }

  .search {
    height: 80rpx;
    border: 1px solid #e0e0e0;
    width: 530rpx;
    border-radius: 40rpx;
    color: #999999;
    display: flex;
    align-items: center;
    padding-left: 30rpx;
    font-size: 30rpx;
  }
}
</style>
